import axios from 'axios'
import {v4 as uuid} from 'uuid'
import dayjs from 'dayjs'
import './App.css';
import {useEffect, useRef, useState} from 'react'
import { useDispatch, useSelector } from 'react-redux';
import { decrement, increment, addToNum } from './store/modules/counterStore'
import { fetchChannelList } from './store/modules/channelStore';

function App() {
  let inputRef = useRef(null)

  const handleClickDom = () => {
    console.log('inputRef.current', inputRef.current)
    console.log('inputRef.current_dir', inputRef)
    console.log('inputRef.value', inputRef.current.value)
    inputRef.current.focus()
  }
  let [textValue, setTextValue] = useState('')
  const handleInputChange = (value) => {
    console.log('handleInputChange=>value', value)
    setTextValue(value)
  }
  // http://localhost:3004/list
  let [userList, setUserList] = useState([])
  const handleUseJSONServer = async() => {
    const res = await axios.get('http://localhost:3004/list')
    console.log('res.data', JSON.stringify(res.data))
    if (res.status == 200) {
      setUserList(res.data)
    }
  }
  useEffect(() => {
    handleUseJSONServer()
  }, [])
  
  const { count } = useSelector(state => state.counter)
  const { channelList } = useSelector(state => state.channel)
  const dispath = useDispatch()

  useEffect(() => {
    dispath(fetchChannelList())
  }, dispath)

  return (
    <div className="App">
      <div>uuid:{uuid()}</div>
      <div>dayjs:{dayjs(new Date()).format('MM/DD hh:mm')}</div>
      <input type='text' ref={inputRef} value={textValue} onChange={(e) => {handleInputChange(e.target.value)}}></input>
      <button onClick={handleClickDom}>获取dom</button>
      <button onClick={handleUseJSONServer}>使用json-server</button>
      {/* {userList} */}
      {
        userList && userList.length && userList.map(item => {
          return <div>{item.id}--{item.name}--{item.sex}--{item.age}</div>
        })
      }
      {
        channelList.map(item => {
          return <div key={item.id}>{item.name}</div>
        })
      }
      <div>
        <div>count:{count}</div>
        <div>
          <button onClick={() => dispath(increment())}>+</button>
          <button onClick={() => dispath(decrement())}>-</button>
          <button onClick={() => dispath(addToNum(10))}>通用</button>
        </div>
      </div>
    </div>
  );
}

export default App;
